<template>
  <el-dialog id="order-detail" title="订单详情" width="80%" :visible.sync="visible" @close="cancel">
    <el-form label-position="left" class="demo-table-expand" label-width="150px" size="mini">
      <row-col :span-l="24">
        <el-form-item label="单号:">{{obj.number}}</el-form-item>
      </row-col>
      <row-col :span-l="24" v-if="obj.sonList && obj.sonList.length > 0">
        <el-form-item label="子单:">
          <div v-for="item in obj.sonList" :key="item.id" style="display: flex; justify-content: space-between">
            <span>单号：{{item.number}}</span>
            <span>长：{{item.length}}</span>
            <span>宽：{{item.width}}</span>
            <span>高：{{item.height}}</span>
            <span>打包方式：{{item.packWay}}</span>
          </div>
        </el-form-item>
      </row-col>
      <row-col>
        <el-form-item label="寄件人姓名:">{{obj.senderName}}</el-form-item>
        <el-form-item slot="r">{{obj.laosSenderName}}</el-form-item>
      </row-col>
      <row-col>
        <el-form-item label="始发地:">{{obj.beginPlace}}</el-form-item>
        <el-form-item slot="r">{{obj.laosBeginPlace}}</el-form-item>
      </row-col>
      <row-col>
        <el-form-item label="单位名称:">{{obj.senderCompanyName}}</el-form-item>
        <el-form-item slot="r">{{obj.laosSenderCompanyName}}</el-form-item>
      </row-col>
      <row-col>
        <el-form-item label="寄件人详细地址:">{{obj.senderAddress}}</el-form-item>
        <el-form-item slot="r">{{obj.laosSenderAddress}}</el-form-item>
      </row-col>
      <row-col>
        <el-form-item label="寄件人联系电话:">{{obj.senderPhone}}</el-form-item>
      </row-col>
      <row-col>
        <el-form-item label="寄件人证件号:">{{obj.senderId}}</el-form-item>
      </row-col>
      <row-col>
        <el-form-item label="收件人姓名:">{{obj.receiverName}}</el-form-item>
        <el-form-item slot="r">{{obj.laosReceiverName}}</el-form-item>
      </row-col>
      <row-col>
        <el-form-item label="目的地:">{{obj.endPlace}}</el-form-item>
        <el-form-item slot="r">{{obj.laosEndPlace}}</el-form-item>
      </row-col>
      <row-col>
        <el-form-item label="单位名称:">{{obj.receiverCompanyName}}</el-form-item>
        <el-form-item slot="r">{{obj.laosReceiverCompanyName}}</el-form-item>
      </row-col>
      <row-col>
        <el-form-item label="收件人详细地址:">{{obj.receiverAddress}}</el-form-item>
        <el-form-item slot="r">{{obj.laosReceiverAddress}}</el-form-item>
      </row-col>
      <row-col>
        <el-form-item label="收件人联系电话:">{{obj.receiverPhone}}</el-form-item>
      </row-col>
      <row-col>
        <el-form-item label="收件人证件号:">{{obj.receiverId}}</el-form-item>
      </row-col>
      <row-col :span-l="24">
        <el-form-item label="快递种类:">{{obj.expressSort ? '文件' : '物品'}}</el-form-item>
      </row-col>
      <row-col>
        <el-form-item label="物品名称:">{{obj.articleName}}</el-form-item>
        <el-form-item slot="r">{{obj.laosArticleName}}</el-form-item>
      </row-col>
      <row-col :span-l="24">
        <el-form-item label="结算方式:">{{obj.websiteClearingWay ? '到付' : '寄付'}}</el-form-item>
      </row-col>
      <row-col :span-l="24">
        <el-form-item label="是否保价:">{{obj.isProtect ? '是' : '否'}}</el-form-item>
      </row-col>
      <row-col :span-l="24" v-if="obj.isProtect">
        <el-form-item label="保价类型:">{{obj.protectWay ? '易碎品' : '普通'}}</el-form-item>
      </row-col>
      <row-col :span-l="24" v-if="obj.isProtect">
        <el-form-item label="保额:">{{obj.coverage}}</el-form-item>
      </row-col>
      <row-col :span-l="24" v-if="obj.isProtect">
        <el-form-item label="保价费:">{{obj.protectFee}}</el-form-item>
      </row-col>
      <row-col :span-l="24">
        <el-form-item label="是否需要报关费:">{{obj.isCustomsFee ? '是' : '否'}}</el-form-item>
      </row-col>
      <row-col :span-l="24" v-if="obj.isCustomsFee">
        <el-form-item label="报关费金额:">{{obj.customsFee}}</el-form-item>
      </row-col>
      <row-col :span-l="24">
        <el-form-item label="重量:">{{obj.weight}}</el-form-item>
      </row-col>
      <row-col :span-l="24">
        <el-form-item label="运费:">{{obj.freight}}</el-form-item>
      </row-col>
      <row-col :span-l="24">
        <el-form-item label="代收贷款:">{{obj.loans}}</el-form-item>
      </row-col>
      <row-col :span-l="24">
        <el-form-item label="特殊区域费:">{{obj.specialPlaceFee}}</el-form-item>
      </row-col>
      <row-col :span-l="24">
        <el-form-item label="包装费:">{{obj.packFee}}</el-form-item>
      </row-col>
      <row-col>
        <el-form-item label="总计:">{{obj.totalFee}}</el-form-item>
      </row-col>
      <!--      <el-divider/>-->
      <!--      <el-row>-->
      <!--        <el-col :span="8">-->
      <!--          <el-form-item label="品名(中文):">{{obj.articleName}}</el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="8">-->
      <!--          <el-form-item label="品名(老挝):">{{obj.laosArticleName}}</el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="8">-->
      <!--          <el-form-item label="品名(英文):">{{obj.enArticleName}}</el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <!--      <row-col>-->
      <!--        <el-form-item label="税号">{{obj.dutyParagraph}}</el-form-item>-->
      <!--        <el-form-item label="规格型号:" slot="r">{{obj.specification}}</el-form-item>-->
      <!--      </row-col>-->
      <!--      <el-row>-->
      <!--        <el-col :span="6">-->
      <!--          <el-form-item label="毛重KG:">{{obj.roughWeight}}</el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="6">-->
      <!--          <el-form-item label="净重KG:">{{obj.netWeight}}</el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="6">-->
      <!--          <el-form-item label="内件毛重KG:">{{obj.insideRoughWeight}}</el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <!--      <el-row>-->
      <!--        <el-col :span="6">-->
      <!--          <el-form-item label="内件数量:">{{obj.insideCount}}</el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="6">-->
      <!--          <el-form-item label="申报单价:">{{obj.declarationUnitFee}}</el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="6">-->
      <!--          <el-form-item label="申报总价:">{{obj.declarationTotalFee}}</el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="6">-->
      <!--          <el-form-item label="计量单位">{{obj.measureUnit}}</el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <!--      <el-row>-->
      <!--        <el-col :span="6">-->
      <!--          <el-form-item label="税率:">{{obj.taxRate}}</el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="6">-->
      <!--          <el-form-item label="应收税额:">{{obj.receivableTax}}</el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="6">-->
      <!--          <el-form-item label="实收税额:">{{obj.realTax}}</el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="6">-->
      <!--          <el-form-item label="补收税额:">{{obj.repairTax}}</el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <!--      <row-col>-->
      <!--        <el-form-item label="发件人城市:">{{obj.senderCity}}</el-form-item>-->
      <!--        <el-form-item label="英文发件人城市:" slot="r">{{obj.enSenderCity}}</el-form-item>-->
      <!--      </row-col>-->
      <!--      <row-col>-->
      <!--        <el-form-item label="英文发件人:">{{obj.enSenderName}}</el-form-item>-->
      <!--        <el-form-item label="英文发件人地址:" slot="r">{{obj.enSenderAddress}}</el-form-item>-->
      <!--      </row-col>-->
      <!--      <row-col>-->
      <!--        <el-form-item label="收件人城市:">{{obj.receiverCity}}</el-form-item>-->
      <!--        <el-form-item label="产销城市:" slot="r">{{obj.saleCity}}</el-form-item>-->
      <!--      </row-col>-->
      <!--      <row-col>-->
      <!--        <el-form-item label="发件人国别(地区):">{{obj.senderCountry}}</el-form-item>-->
      <!--        <el-form-item label="备注(内件明细):" slot="r">{{obj.detailNotes}}</el-form-item>-->
      <!--      </row-col>-->
      <el-divider/>
      <row-col>
        <el-form-item label="揽收网点:">{{operationFirst.currentName}}</el-form-item>
        <el-form-item slot="r">{{operationFirst.laosCurrentName}}</el-form-item>
      </row-col>
      <row-col>
        <el-form-item label="签收网点:">{{operationFirst.sendToName}}</el-form-item>
        <el-form-item slot="r">{{operationFirst.laosSendToName}}</el-form-item>
      </row-col>
      <el-divider/>
      <row-col>
        <el-form-item label="状态:">{{$state(obj.state)}}</el-form-item>
      </row-col>
      <row-col>
        <el-form-item label="备注:">{{obj.notes}}</el-form-item>
        <el-form-item slot="r">{{obj.laosNotes}}</el-form-item>
      </row-col>
      <row-col>
        <el-form-item label="快递员:">{{obj.c_log_member}}</el-form-item>
        <el-form-item slot="r">{{obj.l_log_member}}</el-form-item>
      </row-col>
      <row-col>
        <el-form-item label="快递员联系方式:">{{obj.c_co_contact}}</el-form-item>
        <el-form-item slot="r">{{obj.l_co_contact}}</el-form-item>
      </row-col>
      <row-col>
        <el-form-item label="当前网点:">{{operationLast.currentName}}</el-form-item>
        <el-form-item slot="r">{{operationLast.laosCurrentName}}</el-form-item>
      </row-col>
      <row-col v-if="operationLast.state === 1">
        <el-form-item label="发往网点:">{{operationLast.sendToName}}</el-form-item>
        <el-form-item slot="r">{{operationLast.laosSendToName}}</el-form-item>
      </row-col>
      <row-col v-if="operationLast.state === 5">
        <el-form-item label="签收图片:">
          <el-image
              style="width: 175px;height: 125px"
              :src="$baseApi + operationLast.picture"
              :preview-src-list="[$baseApi + operationLast.picture]">
            <div slot="error">
              <img src="../../assets/notFound.png" alt=""/>
            </div>
          </el-image>
        </el-form-item>
      </row-col>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {getOperationApi} from "@/api/operation";
  import {resetData} from "@/utils/common";

  export default {
    name: "OrderDetail",
    data() {
      return {
        visible: false,
        obj: {
          sonList: []
        },
        operationFirst: {},
        operationLast: {}
      }
    },
    watch: {
      obj(value) {
        if (!value.number) return
        getOperationApi({number: value.number}).then(result => {
          let begin = result.resultParam.result.begin;
          let end = result.resultParam.result.end;
          if (begin instanceof Array) {
            this.operationFirst = begin[0] // 第一条物流信息
            this.operationLast = begin[begin.length - 1] // 最后第一条物流信息
          }
          if (end instanceof Array) {
            this.operationFirst = end[0] // 第一条物流信息
            this.operationLast = end[end.length - 1] // 最后第一条物流信息
          }
        })
      }
    },
    methods: {
      cancel() {
        resetData(this)
      }
    }
  }
</script>

<style lang="scss" scoped>
  #order-detail {
    .el-form-item {
      margin-bottom: 0 !important;
    }

    .el-row {
      padding: 0 3px 0 3px;
    }

    .el-row:nth-child(2n-1) {
      background: rgb(243, 243, 243);
    }
  }
</style>
